<template>
  <div id='wrap'>
    <h1>路由基础知识总结</h1>
    <!-- 使用字符串查询  http://localhost:5173/demo?id=100&name=%E5%B0%8F%E6%A1%83-->
    <p>查询字符串：{{ $route.query.id }}</p>
    <p>查询字符串：{{ $route.query.name }}</p>

    <!-- 传参操作：query，parmas子组件 -->
    <RouterLink :to="{ path: '/demo/demoson', query: { id: 1, title: '新闻标题', content: '新闻内容' } }">第一个子组件</RouterLink>
    <RouterLink :to="{ name: 'demoson1', params: { title: '新闻标题', content: '新闻内容' } }">第二个子组件：params传参
    </RouterLink>

    <br>

    <!-- 编程式导航子组件 -->
    <button @click="rpush">跳转页面demoson2</button>
    <RouterView></RouterView>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'demo',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
//useRoute：路由上下文，能够获取路由参数，
//useRouter：路由对象，调用对象的方法
const route = useRoute();
const router = useRouter();

console.log(route.query) //query：查询字符串  查询地址栏字符串
console.log(route.params) //params：路由传参

//编程式导航
const islogin = ref(true)
const rpush = () => {
  if (islogin.value) {
    router.push(
      {
        path: '/demo/demoson2',
        query: { id: 1, title: '新闻标签', content: '新闻内容' },
      }
    )
  }
}



</script>

<style lang='scss' scoped></style>
